<template>
	<view>
		<view class="heading">
			<image class="heading-icon1" @tap="navigateBack" src="../../static/icon/detail/back.png"></image>
			<image class="heading-icon2" @tap="gotoVR" src="../../static/icon/detail/vr.png"></image>
			<image class="heading-icon3" @tap="link" src="../../static/icon/detail/share.png"></image>
		</view>
		<view class="bodying">
			<view class="uni-flex uni-column">
				<view class="swiper">
					<view class="uni-margin-wrap">
						<uni-swiper-dot :photo="photo" field="content">
							<swiper class="swiper-box" :autoplay="true" :interval="3000" :duration="500"
								:indicator-dots=true>
								<swiper-item v-for="(item, index) in photo" :key="index">
									<view :class="item.colorClass" class="swiper-item">
										<image class="image" :src="item.photoLocation" mode="aspectFill" />
									</view>
								</swiper-item>
							</swiper>
						</uni-swiper-dot>
					</view>
				</view>
				<view class="part-one">
					<view class="uni-flex uni-column">
						<view class="uni-flex uni-row">
							<view class="price" v-text="houseInfo.rentingPrice"></view>
							<view class="unit">元/月</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="rentheading" v-text="houseInfo.rentingHeading"></view>
						</view>
					</view>
				</view>
				<view class="cut-off-rule"></view>
				<view class="part-tow">
					<view class="uni-flex uni-row">
						<view class="flex-item uni-flex uni-column">
							<text class="information-two" v-text="houseInfo.houseDirection"></text>
							<text class="property-two">朝向</text>
						</view>
						<view class="flex-item uni-flex uni-column">
							<text class="information-two">{{houseInfo.houseArea}}m²</text>
							<text class="property-two">面积</text>
						</view>
						<view class="flex-item uni-flex uni-column">
							<text v-if="houseInfo.houseFloor < 8"
								class="information-two">低/{{houseInfo.houseFloor}}</text>
							<text v-else-if="houseInfo.houseFloor < 16"
								class="information-two">中/{{houseInfo.houseFloor}}</text>
							<text v-else class="information-two">高/{{houseInfo.houseFloor}}</text>
							<text class="property-two">楼层</text>
						</view>
					</view>
				</view>
				<view class="cut-off-rule"></view>
				<view class="part-three">
					<view class="uni-flex uni-row">
						<view class="flex-item uni-flex uni-column">
							<view v-if="houseInfo.rentingAnytime == 1">
								<image class="icon" src="../../static/icon/detail/check.png"></image>
								<text class="property-three">拎包入住</text>
							</view>
							<view v-else>
								<image class="icon-none" src="../../static/icon/detail/check.png"></image>
								<text class="property-three-none">拎包入住</text>
							</view>
						</view>
						<view class="flex-item uni-flex uni-column">
							<view v-if="houseInfo.houseElevator == 1">
								<image class="icon" src="../../static/icon/detail/elevator.png"></image>
								<text class="property-three">电梯</text>
							</view>
							<view v-else>
								<image class="icon-none" src="../../static/icon/detail/elevator.png"></image>
								<text class="property-three-none">电梯</text>
							</view>
						</view>
						<view class="flex-item uni-flex uni-column">
							<view v-if="houseInfo.houseFitment == '精装'">
								<image class="icon" src="../../static/icon/detail/fitment.png"></image>
								<text class="property-three">精装</text>
							</view>
							<view v-else>
								<image class="icon-none" src="../../static/icon/detail/fitment.png"></image>
								<text class="property-three-none">精装</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cut-off-rule"></view>
				<view class="part-four">
					<view class="detailspage">房源详情</view>
					<view class="uni-flex uni-column">
						<view class="uni-flex uni-row">
							<text class="property-four">详细地址:</text>
							<text class="information-four" v-text="houseInfo.houseDetailaddress"></text>
						</view>
						<view class="uni-flex uni-row">
							<text class="property-four">房屋楼型:</text>
							<text class="information-four" v-text="houseInfo.houseWedge"></text>
						</view>
						<view class="uni-flex uni-row">
							<text class="property-four">建房时间:</text>
							<text class="information-four" v-text="getdate(houseInfo.houseCreattime)"></text>
						</view>
						<view class="uni-flex uni-row">
							<text class="property-four">楼型:</text>
							<text class="information-four" v-text="houseInfo.houseType"></text>
						</view>
					</view>
				</view>
				<view class="cut-off-rule"></view>
				<view class="part-five">
					<view class="detailspage">其他介绍</view>
					<view class="header-cont">
						<view class="nav" catchtouchmove="true">
							<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">房源卖点</view>
							<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">户型介绍</view>
							<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">税费解析</view>
							<view :class="navIndex==4?'activite':''" @click="checkIndex(4)">周边配套</view>
							<view :class="navIndex==5?'activite':''" @click="checkIndex(5)">交通出行</view>
							<view :class="navIndex==6?'activite':''" @click="checkIndex(6)">房屋备注</view>
						</view>
					</view>
					<view class="body">
						<view class="content" v-if="navIndex==1" v-text="houseInfo.houseSellpoint"></view>
						<view class="content" v-if="navIndex==2" v-text="houseInfo.houseHtype"></view>
						<view class="content" v-if="navIndex==3" v-text="houseInfo.houseTax"></view>
						<view class="content" v-if="navIndex==4" v-text="houseInfo.houseBside"></view>
						<view class="content" v-if="navIndex==5" v-text="houseInfo.houseTraffic"></view>
						<view class="content" v-if="navIndex==6" v-text="houseInfo.houseRemark"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="uni-flex uni-row ">
			<!-- <view > -->
				<view v-if="status == 1">
					<view class="concern" @tap="noconcern">
						<view class="uni-flex uni-column">
							<image class="footicon" src="http://192.168.43.54:8002/images/icon/detail/已关注.png"></image>
							<text class="foottext">已关注</text>
						</view>
					</view>
				</view>
				<view v-else-if="status == 0">
					<view class="concern" @click="addConcern">
						<view class="uni-flex uni-column">
							<image class="footicon" src="http://192.168.43.54:8002/images/icon/detail/fabulous.png">
							</image>
							<text class="foottext">关注</text>
						</view>
					</view>
				</view>
				<view class="comment">
					<view class="uni-flex uni-column" @click="link">
						<button class="foottext1">微聊</button>
					</view>
					<!-- <button class="uni-flex uni-column" @click="link">联系商家</button> -->
					<!-- <view class="uni-flex uni-column" @click="link">
						<image class="footicon" src="http://192.168.43.54:8002/images/icon/detail/comment.png"></image>
						<text class="foottext">联系商家</text>
					</view> -->
				</view>
				<view>
					<view class="uni-flex uni-column">
						<uni-calendar ref="calendar" :insert="false" @confirm="confirm"></uni-calendar>
						<button class="seehouse" @click="open">预约看房</button>
					</view>
					<!-- <button  @tap="seehouse">预约看房</button> -->
				</view>

				<!-- <button class="form" @tap="link">发起订单</button> -->
			</view>
		</view>
		<tui-tips ref="toast" position="center" backgroundColor="rgb(193,108,117)"></tui-tips>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import tuiTips from 'thorui-uni/lib/thorui/tui-tips/tui-tips'


	export default {
		components: {
			tuiTips
		},
		data() {
			return {

				timestamp: '',
				userId: 1,
				navIndex: 1,
				houseId: 1,
				concernstate: 0,
				renting: [{}],
				houseInfo: {
					rentingPrice: 5800,
					rentingHeadine: "整租-北京新天地五期 1室1厅",
					houseDirection: "北",
					houseArea: 100.86,
					houseFloor: 20,
					rentingAnytime: 1,
					houseDetailaddress: "重庆市渝北区高堡湖西路1号10幢10-3",
					houseWedge: "普通住宅",
					houseType: "塔楼",
					houseCreattime: 1472048779952,
					houseElevator: 0,
					houseFitment: "精装",
					houseSellpoint: "经常租出去",
					houseHtype: "户型很好",
					houseTax: "不用交税",
					houseBside: "周围有个幼儿园",
					houseTraffic: "交通很方便",
					houseRemark: "没啥要备注的"
				},
				photo: [{
						colorClass: 'uni-bg-white',
						photoLocation: '../../static/facephoto/1.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-white',
						photoLocation: '../../static/facephoto/2.jpg',
						content: '内容 B'
					}
				],
				status: -1
			}
		},
		onLoad(option) {
			this.houseId = option.id
			this.getHouseById()
			this.getIsConcern()
			this.$forceUpdate()
			// this.getphotoByHouseId()
		},
		methods: {
			...mapActions(['setCurrentChatFrame']),
			link() {
				if (this.user.userId == this.houseInfo.userId) {
					let options = {
						msg: '该房源是您自己的！',
						duration: 500
					}
					this.$refs.toast.showTips(options)
					return
				}
				this.$axios.post('hp/addFriend', this.qs.stringify({
						userId: this.user.userId,
						friendId: this.houseInfo.userId
					}))
					.then(res => {
						console.log(res.data)
						this.setCurrentChatFrame({
							chatId: this.houseInfo.userId,
							chatObjectPhoto: res.data.friendPhoto,
							nickname: res.data.nickname,
							isFriend: 1,
							blackList: 0,
							userPhoto: res.data.userPhoto
						})
						uni.navigateTo({
							url: '/pages/news/chatFrame'
						})
					})
					.catch(err => {
						console.log(err)
					})
			},
			getdate() {
				var now = new Date(this.houseInfo.houseCreattime),
					y = now.getFullYear(),
					m = now.getMonth() + 1,
					d = now.getDate();
				// return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
				return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d);
			},
			checkIndex(index) {
				this.navIndex = index;
			},
			navigateBack() {
				uni.navigateBack();
			},
			getHouseById() {
				let data = {
					houseId: this.houseId
				}
				this.$axios.post('getHouseById', this.qs.stringify(data))
					.then(res => {
						this.houseInfo = res.data.houses
						this.getRentingByHouseId()

					})
			},
			getRentingByHouseId() {
				let data = {
					houseId: this.houseId
				}
				this.$axios.post('getAllRentingsByHouseId', this.qs.stringify(data))
					.then(res => {
						this.renting = res.data.allRentings[0]
						this.houseInfo.rentingHeading = this.renting.rentingHeading
						this.houseInfo.rentingPrice = this.renting.rentingPrice
						this.houseInfo.rentingAnytime = this.renting.rentingAnytime
						this.$forceUpdate()
					})
			},
			gotoVR() {
				if (this.houseInfo.VR == 0)
					uni.showToast({
						title: '本房源暂无VR功能',
						icon: 'none',
						duration: 2000
					})
				else {
					uni.navigateTo({
						url: "../common/vr"
					})
				}
			},
			getIsConcern() {
				let data = {
					userId: this.user.userId,
					houseId: this.houseId
				}
				this.$axios.post('isConcern', this.qs.stringify(data))
					.then(res => {
						this.concern = res.data.concern
						this.status = res.data.concern.length > 0 ? 1 : 0
					})
			},
			noconcern() {
				this.$axios.post('delConcern', this.qs.stringify({
						houseId: this.houseId,
						userId: this.user.userId
					}))
					.then(res => {
						this.status = 0
					})
					.catch(err => {
						console.log(err)
					})
			},
			addConcern() {
				// console.log(this.houseId)
				// console.log(this.user.userId)
				this.$axios.post('addConcern', this.qs.stringify({
						houseId: this.houseId,
						userId: this.user.userId,
						concernType: 2
					}))
					.then(res => {
						this.status = 1
					})
					.catch(err => {
						console.log(err)
					})
			},
			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				// let time2 = new Date().getTime();
				var nowtime = new Date().getTime();
				console.log(this.houseInfo);
				console.log(e);
				var apply = {

				}
				console.log(apply)
				this.$axios.post('AddSeeHouseApplication?', this.qs.stringify({
						houseId: parseInt(this.houseId),
						seehouseapplicationTime: nowtime,
						seehouseapplicationCreattime: nowtime,
						seehouseapplicationState: 0,
						seehouseapplicationApplyerid: this.userId,
						agentId: 2,
						seehouseapplicationHousestate: 0,
					}))
					.then((res) => {
						console.log(res.data)
					})
					.catch(err => {
						console.log(err)
					})
				// console.log('houseId:'+this.houseId+'  applyId'+this.userId+'  nowtime'+nowtime);
			}
		},
		computed: {
			...mapState(['user'])
		},

	}
</script>

<style>
	.heading {
		top: 0;
		position: fixed;
		height: 100rpx;
		width: 100%;
		background-color: rgb(255, 255, 255, 0);
		z-index: 1;
	}

	.heading-icon1 {
		height: 80rpx;
		width: 80rpx;
		padding: 10rpx 5rpx 0rpx 0rpx;
	}

	.heading-icon2 {
		height: 80rpx;
		width: 80rpx;
		padding: 10rpx 5rpx 0rpx 440rpx;
	}

	.heading-icon3 {
		height: 80rpx;
		width: 80rpx;
		padding: 10rpx 5rpx 0rpx 50rpx;
	}

	.bodying {
		position: relative;
		overflow: hidden;
		margin-bottom: 150rpx;
	}

	.swiper_img {
		height: 500rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	.swiper-box {
		height: 500rpx;
		width: 100%;
	}

	.image {
		width: 100%;
		height: 500rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		overflow: hidden;
		height: 150rpx;
		width: 100%;
		background-color: rgb(255, 255, 255);
		text-align: center;
		text-decoration: underline;
		font-weight: 400;
		text-decoration: none;
	}

	.footicon {
		height: 80rpx;
		width: 80rpx;
		padding: 10rpx 30rpx;
		/* margin-left: 30rpx; */
		/* margin-right: 30rpx; */
	}

	.foottext {
		font-size: 60%;
		margin-left: 50rpx;
		margin-right: 50rpx;
		
	}
	.foottext1{
		background-color:  rgb(245, 45, 5);
		color: white;
		font-size: 20px;
		height: 100rpx;
		width: 260rpx;
		margin: auto;
		text-align: center;
		font-weight: bold;
		margin-left: 20rpx;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}
	.seehouse {
		background-color: rgb(218, 174, 54);
		color: white;
		font-size: 20px;
		height: 100rpx;
		width: 260rpx;
		margin: auto;
		text-align: center;
		font-weight: bold;
		margin-top: 20rpx;
		/* margin-left: 50rpx; */
		/* margin-right: 50rpx; */
	}

	.form {
		background-color: rgb(245, 45, 5);
		color: white;
		font-size: 20px;
		height: 100rpx;
		width: 230rpx;
		margin: auto;
		text-align: center;
		font-weight: bold;
	}

	.price {
		font-size: 70rpx;
		color: red;
		padding: 10rpx 50rpx;
	}

	.unit {
		font-size: 40rpx;
		color: red;
		padding: 45rpx 0rpx 0rpx 0rpx;
	}

	.rentheading {
		font-size: 50rpx;
		padding: 0rpx 50rpx;
	}

	.cut-off-rule {
		height: 1rpx;
		width: 90%;
		background-color: rgb(184, 184, 184);
		margin: 40rpx 5%;
	}

	.flex-item {
		width: 33.3%;
		text-align: center;
	}

	.information-two {
		font-size: 40rpx;
		color: black;
	}

	.property-two {
		font-size: 30rpx;
		color: rgb(190, 190, 190);
	}

	.detailspage {
		font-size: 50rpx;
		margin: 20rpx 0rpx 10rpx 50rpx;
	}

	.icon {
		height: 80rpx;
		width: 80rpx;
		margin: 0rpx 90rpx;
	}

	.icon-none {
		height: 80rpx;
		width: 80rpx;
		margin: 0rpx 90rpx;
		opacity: 0.3;
	}

	.property-three {
		font-size: 30rpx;
		color: black;
	}

	.property-three-none {
		font-size: 30rpx;
		color: rgb(168, 167, 167);
	}

	.property-four {
		font-size: 30rpx;
		margin: 10rpx 0rpx 10rpx 50rpx;
	}

	.information-four {
		font-size: 30rpx;
		margin: 10rpx;
	}

	.nav {
		width: 90%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 25rpx;
	}

	.activite {
		font-weight: bold;
		border-bottom: 6rpx solid #0065d9;
	}

	.nav>view {
		padding-bottom: 10rpx;
	}

	.box {
		background: #008000;
	}

	.body {
		overflow-y: scroll;
		height: 200rpx;
		width: 90%;
		background-color: rgb(255, 255, 255);
		margin: auto;
		border-style: solid;
		border-width: 1px;
		border-color: rgb(179, 179, 179);
		border-radius: 10rpx;
	}

	.container {
		width: 100%;
		display: flex;
		min-height: 100vh;
		flex-direction: column;
	}
</style>
